<script lang="ts" setup>
// 导入组件
import { ref, reactive, getCurrentInstance } from "vue";
// 引入Vue组件
import { ElMessage, ElMessageBox } from "element-plus";
// 导入按钮图标
import { Edit, More, Delete, CirclePlus } from "@element-plus/icons-vue";
// 导入数据的api
import Api from "../../api";
// 获取当前的实例
const { proxy } = getCurrentInstance() as any;

var Data = reactive({
  // 权限信息--初始化树状结构
  permission: reactive([]),
  // 表单信息
  formData: reactive({
    id: ref(""),
    label: ref(""),
    url: ref(""),
    icon: ref(""),
    order: ref(""),
    parent: ref(""),
    buttons: reactive(['北京','广州']),
  }),
  // 表单中所有的父节点
  form_parent_options: reactive([{ id: "", title: "" }]),
  // 系统中所有的按钮 
  form_buttons: reactive([{id:"", name:"", desc:""}])
});

// 定义树状结构的key
const defaultProps = {
  children: "children",
  label: "label",
};

const getData = () => {
  // 获取权限信息 --- 初始化树状结构
  Api.Permission.display().then((res) => {
    Data.permission = res.data.data;
  });
  // 获取父类信息---填充下拉框
  Api.Permission.parent().then((res) => {
    Data.form_parent_options = res.data.data;
  });
  // 获取所有的按钮 --- 以复选框展示
  Api.Button.getAll().then((res)=>{
    Data.form_buttons = res.data;
  })
};

// ===== 节点点击事件===========
const nodeClick = (data: any) => {
  Data.formData = JSON.parse(JSON.stringify(data));
};

// 自动运行
const autoRun = () => {
  getData();
};

autoRun();
</script>

<template>
  <!-- 内容 -->
  <el-row :gutter="20">
    <el-col :span="8">
      <el-tree
        :data="Data.permission"
        :props="defaultProps"
        :highlight-current="true"
        default-expand-all
        @node-click="nodeClick"
        style="padding-left: 40px; border: 1px navy solid"
      />
    </el-col>
    <el-col :span="2">
      <div style="margin-bottom: 20px">
        <el-button :icon="CirclePlus" type="primary" style="width: 100%">
          添加
        </el-button>
      </div>
      <div style="margin-bottom: 20px">
        <el-button :icon="Edit" type="warning" style="width: 100%"> 修改</el-button>
      </div>
      <div>
        <el-button :icon="Delete" type="danger" style="width: 100%">删除</el-button>
      </div>
    </el-col>
    <el-col :span="14">
      <el-form :model="Data.formData" class="demo-form-inline" label-width="100px">
        <el-form-item label="编号：" prop="id">
          <el-input v-model="Data.formData.id" :suffix-icon="Edit" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="标题：" prop="name">
          <el-input
            v-model="Data.formData.label"
            :suffix-icon="Edit"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="URL:" prop="name">
          <el-input
            v-model="Data.formData.url"
            :suffix-icon="Edit"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="图标：" prop="name">
          <el-input
            v-model="Data.formData.icon"
            :suffix-icon="Edit"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="排序：" prop="name">
          <el-input
            v-model="Data.formData.order"
            :suffix-icon="Edit"
            placeholder="请输入"
        /></el-form-item>
        <el-form-item label="父节点：" prop="name">
          <el-select
            v-model="Data.formData.parent"
            placeholder="请选择顶级菜单"
            clearable
            filterable
            :disabled="Data.isView"
            style="width: 100%"
          >
            <el-option
              v-for="item in Data.form_parent_options"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="按钮：" >
          <el-checkbox-group v-model="Data.formData.buttons" >
           
            <el-checkbox  border v-for="{id, name} in Data.form_buttons" :key="name" 
            :label="name" :value="name" style="float:left;margin-bottom:10px;">
            {{name}}
            </el-checkbox>
            
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-row :gutter="10" style="width: 100%">
            <el-col :span="18"></el-col>

            <el-col :span="3">
              <el-button :icon="Edit" type="primary" style="width: 100%"> 提交</el-button>
            </el-col>
            <el-col :span="3">
              <el-button :icon="Edit" type="info" style="width: 100%"> 取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 弹出层 -->
</template>

<style scoped>
:deep(.el-tree-node__content) {
  height: 36px;
  color: #304156;
  font-weight: bold;
}
</style>
